<template>
  <div>
    <div class="league-round">
      <div class="league-round-block"></div>
      <div class="league-round-text">中超联赛{{ season }}</div>
    </div>
    <div class="schedule-table">
      <el-table
        :data="roundLimit"
        :show-header="false"
        height="530px"
        @cell-mouse-enter="enterRow"
        @cell-mouse-leave="leaveRow"
        style="width: 100%"
      >
        <el-table-column prop="rank" label="轮次" width="100">
          <template slot-scope="scope">
            <span class="battle-time">第{{ scope.row.round }}轮</span>
          </template>
        </el-table-column>
        <el-table-column prop="battle" label="主队" width="140">
          <template slot-scope="scope">
            <div class="team-cell">
              <span class="myColumn" @click="enterTeam(scope.row.homeTeamId)">
                {{ scope.row.homeTeam }}
              </span>
              <img class="team-logo" :src="scope.row.homeTeamImg" alt="" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="battle" label="比分" width="70">
          <template slot-scope="scope">
            <div class="battle-score">
              {{ scope.row.score }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="battle" label="客队" width="196">
          <template slot-scope="scope">
            <div class="team-cell">
              <img class="team-logo" :src="scope.row.awayTeamImg" alt="" />
              <span class="myColumn" @click="enterTeam(scope.row.awayTeamId)">{{
                scope.row.awayTeam
              }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="stadium" label="场地" width="300">
          <template slot-scope="scope">
            <div class="stadium">
              <img
                class="stadium-logo"
                src="../../../assets/image/common/stadium.png"
                alt=""
              />
              <span class="battle-time">{{ scope.row.stadium }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="比赛报告" width="48">
          <template slot-scope="scope">
            <img
              @click="enterMatch(scope.row.matchId)"
              class="match-report"
              src="../../../assets/image/common/airPlane.svg"
              alt=""
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="my-pagination">
      <el-pagination
        @current-change="clickPage"
        background
        layout="prev, pager, next"
        :total="30"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "TeamScheduleTable",
  props: {
    teamId: {
      type: Number,
    },
    season: {
      type: String,
      default() {
        return "2019赛季";
      },
    },
  },
  watch: {
    teamId: {
      handler(newTeamId) {
        const newSeasonId = parseInt(this.season);
        this.season &&
          this.teamId &&
          this.getTeamSchedule(newSeasonId, newTeamId);
      },
      immediate: true,
    },
    season: {
      handler(newSeasonId) {
        const newSeasonNumbId = parseInt(newSeasonId);
        this.season &&
          this.teamId &&
          this.getTeamSchedule(newSeasonNumbId, this.teamId);
      },
      immediate: true,
    },
  },
  data() {
    return {
      roundBattle: [],
      //当前页码 默认为1
      currentPage: 1,
    };
  },
  methods: {
    //鼠标进入当前单元格
    enterRow(row, column, cell, event) {
      //获取当前单元格所在的父元素cell.parentElement
      //为父元素添加类名hover-linear-gradient，这个class可以设置背景渐变
      //这个class在css中利用穿透提前定义
      // console.log(cell);
      cell.parentElement.classList.add("hover-linear-gradient");
      //找到所在行的父元素下的第5个子元素(即最后一个小飞机单元格)
      const airPlane_column = cell.parentElement.childNodes[5].querySelector(
        ".match-report"
      );
      //添加类，同样在css部分提前定义类悬浮的效果为小飞机往右偏移10px
      airPlane_column.classList.add("hover-match-report");
    },
    //鼠标移除当前单元格
    leaveRow(row, column, cell, event) {
      //移除高亮的类
      cell.parentElement.classList.remove("hover-linear-gradient");
      const airPlane_column = cell.parentElement.childNodes[5].querySelector(
        ".match-report"
      );
      //移除小飞机的类
      airPlane_column.classList.remove("hover-match-report");
    },
    //点击球队，进入单个球队页面
    enterTeam(teamId) {
      // console.log(homeTeamId)
      // 命名的路由
      this.$router.push({ name: "singleTeam", params: { teamId: teamId } });
    },
    //点击小飞机，进入比赛报告
    enterMatch(matchId) {
      this.$router.push({ name: "matchReport", params: { matchId: matchId } });
    },
    //点击页码
    clickPage(currentPage) {
      this.currentPage = currentPage;
    },
    //获取单支球队的30轮赛程
    async getTeamSchedule(seasonId, teamId) {
      const seasonNumberId = parseInt(seasonId);
      const { data } = await axios.get(
        `http://8.141.159.127:3000/api/v1/teamfeatures/matchlist/6/${seasonNumberId}/${teamId}`
      );
      // console.log(data);
      this.roundBattle = data;
    },
  },
  computed: {
    //计算1-10 、11-20 、21-30的轮次
    roundLimit() {
      const startIndex = (this.currentPage - 1) * 10;
      const endIndex = startIndex + 10;
      return this.roundBattle.slice(startIndex, endIndex);
    },
  },
  created() {
    this.getTeamSchedule(2019, 2531);
  },
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.league-round {
  display: flex;
  justify-content: space-between;
  width: 210px;
  height: 40px;
  font-size: 22px;
  line-height: 40px;
  font-weight: bold;
  /*background-color: red;*/
  margin: 35px 0 0 20px;
}
.league-round-block {
  width: 7%;
  height: 100%;
  background-color: #16c79a;
}
.schedule-table {
  width: 854px;
  margin: 10px auto 0;
}
.team-cell {
  display: flex;
  width: 120px;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  /*background-color: red;*/
}
.team-logo {
  width: 25px;
  height: 25px;
}
.stadium {
  display: flex;
  align-items: center;
}
.stadium-logo {
  width: 30px;
  height: 30px;
}
.battle-time {
  font-size: 20px;
  font-weight: bold;
}
.battle-score {
  display: inline-block;
  color: #1a936f;
  font-size: 22px;
  font-weight: bold;
  width: 50px;
  height: 30px;
  /*letter-spacing: 5px;*/
  /*margin: auto;*/
  text-align: center;
  line-height: 30px;
  /*background-color: #B500FE;*/
}
.schedule-table /deep/ .el-table td {
  padding: 8px 0; /*no*/
  background-color: #f1f6f9;
  /*background-color: red;*/
  border-bottom: 1px solid white;
}
.schedule-table /deep/ .is-leaf {
  padding: 8px 0; /*no*/
}
.schedule-table /deep/ .hover-linear-gradient {
  background-image: linear-gradient(
    to left,
    rgba(16, 199, 164, 0.1),
    rgba(114, 214, 191, 0.5),
    rgba(134, 179, 211, 0.5)
  );
  cursor: pointer;
}
.schedule-table /deep/ .el-table tbody tr:hover > td {
  background-color: transparent;
}
.match-report {
  width: 30px;
  height: 30px;
}
.schedule-table /deep/ .hover-match-report {
  margin-left: 10px;
  cursor: pointer;
}
.my-pagination {
  margin-top: 10px;
}
.my-pagination
  /deep/
  .el-pagination.is-background
  .el-pager
  li:not(.disabled).active {
  background-color: #194568;
}
</style>
